<template>
  <div>
    <div class="layout-content-breadcrumb">
      <Breadcrumb>
        <Breadcrumb-item>资源管理</Breadcrumb-item>
        <Breadcrumb-item>资源分类</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="page-content">
      <Table :columns="columns" :data="dataSource"></Table>
      <div class="table-paging">
        <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
      </div>
    </div>
  </div>
</template>
<style lang="less">

</style>
<script>
  import api from 'service/resource'
  export default{
    data(){
      return {
        page: 1,
        pageSize: 10,
        totalNumber: 0,
        search: {
          nickname: ''
        },
        columns: [
          {
            title: '类别名称',
            key: 'title'
          },
          {
            title: '创建时间',
            key: 'created_at'
          }
        ],
        dataSource: []
      }
    },
    mounted(){
      this.onPageChange(1)
    },
    methods: {
      onPageChange(page){
        this.page = page
        api.getCates({
          page: page,
          per_page: this.pageSize
        }).then(({data}) => {
          this.dataSource = (data.list || [])
          this.totalNumber = Number(data.total_count)
        })
      }
    }
  }
</script>
